<template>
  <div class="submit-content-file">
    <!-- 上传文件模块 -->
    <div class="uploading-files">
      <div class="uploading-files-header">
        <div class="li">
          <span class="fujian"
            ><vue-icon iconClass="fujian" size="1.2vw" color="#353535"></vue-icon
          ></span>
          <button id="submit" @click="uploadFile">添加附件</button>
          <span class="xiajiantou"
            ><vue-icon iconClass="xiajiantou" size="1vw" color="#333840"></vue-icon
          ></span>
        </div>
        <div class="li"></div>
        <div class="li"></div>
      </div>
      <div class="text test1">
        <p class="special">{{ isFileNull }}</p>
        <p>{{ file ? '' : 'Click or drag the file here to upload' }}</p>
      </div>
      <input id="uploadFile" type="file" title="" @change="getFile" @drop="onDropFile" />
    </div>
    <!-- 上传图片模块 -->
    <div class="uploading-imgs">
      <!-- <div class="text test2">
        <p class="special">{{ isImgNull }}</p>
        <p>{{ img ? '' : '(请在此处添加正文)' }}</p>
      </div> -->
      <textarea id="uploadImg" v-model="text" placeholder="正文"></textarea>
    </div>
    <!-- 功能模块 -->
    <div class="function-moudle">
      <button @click="submit">提交</button>
      <button @click="clear">清除</button>
    </div>
  </div>
</template>

<script>
  /**
   * @vue-prop {Object} userInfo - 当前登录用户的基本信息
   * @vue-prop {Object} curWork -  该用户最新的作业
   * @vue-data {File} [file=''] - 用户上传的文件
   * @vue-data {String} [text=''] - 用户上传的留言
   * @vue-computed {Boolean} isFileNull - 判断用户是否提交作业
   * @vue-event {undefined}  getFile - 获取用户上传的文件
   * @vue-event {undefined} onDropFile - 获取用户拖动上传的文件
   * @vue-event {undefined} submit - 将用户信息和文件提交到后台
   * @vue-event {undefined} clear - 清空用户提交的文件和留言
   */
export default {
  data: () => {
    return {
      file: '',
      text: '',
    };
  },
    props:{
        userInfo:{
        type:Object,
        default:{
         name: null,
         direction: '',
         qq_id: '',
        },
        require:true
    },
    curWork:{
        type:Object,
        require:true
    }
    },
  methods: {
    getFile(e) {
      const file = e.target.files[0];
      console.log(file);
      const fileType = file.name.split('.')[1];
      let that = this;
      if (fileType === 'zip' || fileType === 'rar') {
        this.file = file;
      }else {
        this.$message.warning({ message: '请上传zip或rar格式的文件哦', showClose: true });
        }
    },
    onDropFile(e) {
      e.stopPropagation();
      e.preventDefault(); // 取消默认浏览器的拖拽效果
      let that = this;
      const file = e.dataTransfer.files[0]; // 获取文件对象
      const fileType = file.name.split('.')[1];
      if (fileType === 'zip' || fileType === 'rar') {
        this.file = file;
      }else {
        this.$message.warning({ message: '请上传zip或rar格式的文件哦', showClose: true });
        }
    },
    async submit() {
      const that = this;
        console.log(this.curWork)
        let params={
          file:that.file,
          students_list_pk:that.userInfo.id,
          work_manage_pk:this.curWork.id,
          remark :that.text
        }
        console.log(params)
      if (that.file === '') {
        that.$message.warning({ message: '请先添加文件', showClose: true });
        return;
      }
      // console.log(that.file.name);
      this.$api.homeApi.uploadFile(params).then(
        (res) => {
        console.log(res)
        if(res.status!=200){
            that.$message.warning({ message: res.msg, showClose: true });
            return;
        }
          that.$message.success({ message: '提交成功', showClose: true });
        }
      );
    },
    clear() {
      this.file = '';
      this.text = '';
      document.querySelector('#uploadFile').value = null;
      document.querySelector('#uploadImg').value = null;
    },
  },
  computed: {
    isFileNull() {
      return this.file ? this.file.name : '点击或将文件拖拽到此处上传';
    },
  },
};
</script>
<style lang="less" scoped>
* {
  li {
    list-style: none;
  }
}
textarea {
  border: 0;
}
textarea::-webkit-input-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5vw;
  letter-spacing: 0.2vw;
  color: rgb(22, 9, 9);
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}
// 修改 textarea 光标颜色
textarea {
  vertical-align: baseline;
  caret-color: #3194eb;
}
.submit-content-file {
  width: 42%;
  height: 85vh;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 4vh;
  .uploading-files {
    position: relative;
    margin: 5vh auto 2vh auto;
    width: 34.8vw;
    height: 33vh;
    border: #7e7e80 solid 2px;
    text-align: center;
    .uploading-files-header {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      height: 6vh;
      // background-color: red;
      font-size: 1.1vw;
      .li {
        // float:left;
        position: relative;
        width: 10vw;
        height: 3.5vh;
        // border:1px solid black;
        .fujian {
          position: absolute;
          top: 0;
          left: 0;
        }
        .xiajiantou {
          position: absolute;
          top: 0;
          left: 5.7vw;
        }
        #submit {
          font-size: 1vw;
          position: absolute;
          top: 0;
          left: 1.3vw;
          border: 0;
          outline: 0;
          background-color: rgba(255, 255, 255, 0);
        }
      }
    }
    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.3vw;
      letter-spacing: 0.3px;
      .special {
        font-size: 1.5vw;
        letter-spacing: 0.2vw;
      }
    }
    #uploadFile {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      display: inline-block;
      width: 34.8vw;
      height: 33vh;
    }
    #filename {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.2rem;
      color: rgb(222, 13, 20);
      //  color:black;
    }
  }
  .uploading-imgs {
    position: relative;
    margin: 0 auto;
    width: 34.8vw;
    height: 35vh;
    border: #7e7e80 solid 2px;
    text-align: center;
    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.3vw;
      letter-spacing: 0.6px;
      .special {
        font-size: 1.6vw;
        letter-spacing: 0.3vw;
      }
    }
    #uploadImg {
      // display: inline-block;
      position: absolute;
      left: 0;
      top: 0;
      width: 34.8vw;
      height: 35vh;
      background-color: transparent;
    }
    #imgname {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
    }
  }
  .function-moudle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5vh auto 0 auto;
    cursor: pointer;
    width: 34.8vw;
    height: 3.5vh;
    // border:#7e7e80 solid 2px;
    button {
      cursor: pointer;
      width: 7vw;
      height: 3vh;
      font-size: 0.9vw;
      background-color: #a8bbcb;
      border-radius: 0.5vw;
      border: 0px;
    }
  }
  img[src=''],
  img:not([src]) {
    opacity: 0;
  }
}
</style>
